<template>
  <div class="chart-container">
    <chart height="100%" width="100%" :option="chartOption" />
    <el-button class="chart-panel" type="primary" size="mini" plain @click="dialogTableVisible = true">Tools</el-button>
    <el-dialog v-el-drag-dialog :modal="false" :visible.sync="dialogTableVisible" :title="$t('others.visual.FilterTitle')">
      <panel :filter-payload="filterPayload" :preview="preview" @getFilter="getFilter" />
    </el-dialog>
  </div>
</template>

<script>
import Panel from './components/graph/Panel'
import Chart from './components/graph/Chart'
import elDragDialog from '@/directive/el-drag-dialog'
import { filterVisual } from '@/api/goodsFilter'
export default {
  name: 'BrandIndex',
  components: {
    Chart,
    Panel
  },
  directives: { elDragDialog },
  data: function() {
    return {
      dialogTableVisible: false,
      // 过滤条件
      filterPayload: {
        // 分页
        listQuery: {
          pageSize: 20,
          page: 1,
          total: 0
        },
        // 表名
        tableName: '',
        // 过滤条件
        filters: [],
        // 图形模式
        graphicsModel: 'line',
        // 显示的模式
        showMode: 'newVisual',
        // 值字段
        valueField: {
          field: '',
          symbol: '',
          toField: ''
        },
        // 区间字段
        intervalField: '',
        // 显示的标题
        showField: '',
        // 排序
        sortBy: 'asc',
        // 预览
        preview: true
      },
      // 预览sql
      preview: {
        sql: ''
      },
      // 后端返回来的echarts图形
      chartOption: null
    }
  },
  methods: {
    /**
     * 过滤
     * @param data 子组件传参的数据
     */
    getFilter(data) {
      this.filterPayload = data
      filterVisual(this.filterPayload).then((ret) => {
        if (this.filterPayload.preview) {
          this.preview = ret.data
        } else {
          this.filterPayload = ret.data.fromData
          this.filterPayload.preview = true
          this.chartOption = ret.data.charts
        }
        console.log('filterVisual=>>', ret)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .chart-panel {
    position: fixed;
    top: 9%;
    right: 10px;
  }

</style>
